<!--楼宇设备-->
<template>
  <div class="mainSon">
    <div class="peopleMain">
      <!--头部-->
      <div class="mainUpStyle">
        <div class="upStyle">
          <span>仓库搜索</span>
        </div>
        <div class="topRightImgStyle" @click="show = true"/>
        <form action="/">
          <div class="upSearchStyle">
            <van-search
              v-model="inputSearchValue"
              placeholder="输入品名进行搜索"
              input-align="center"
              clear-trigger="focus"
              left-icon="none"
              class="searchMainStyle"
            />
            <div class="upSearchImgStyle" @click="searchPeopleHandle"/>
          </div>
        </form>
      </div>

      <!--数据-->
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          class="cardVanPullRefresh1"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦!"
            @load="nextPage"
          >
            <div v-for="item in dataList" class="dataStyle" @click="checkPeople(item)">
              <div class="picMainStyle">
                <div class="peoplePicDefaultStyle"/>
              </div>
              <div class="textMainStyle">
                <div>
                  {{ item.NAME }}
                </div>
                <div class="dataBStyle dataTopStyle dataLeftStyle">
                  <div class="van-ellipsis">
                    <van-tag v-if="item.loucname" round type="primary" color="#1989fa54" class="tagStyle tagLeft">
                      {{ item.loucname }}
                    </van-tag>
                    <span>楼</span>
                    <van-tag v-if="item.fangjname" round type="primary" color="rgb(189 123 13 / 18%)"
                             class="tagStyle tagRight van-ellipsis">
                      {{ item.fangjname }}
                    </van-tag>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>

        <van-pull-refresh
          v-else
          class="cardVanPullRefresh2"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-empty
            class="custom-image"
            :image="require('../../../assets/images/nx/icon_common_empty.png')"
            description="暂无数据"/>
        </van-pull-refresh>
      </van-row>


      <!--    打开右侧搜索栏-->
      <van-popup
        v-model:show="show"
        position="right"
        class="rightBar"
        :style="{ height: '100%', width: '75%' }">
        <div class="mainPopupStyle">
          <div class="typeStyle">
            <div class="typeStyleA"></div>
            <div class="typeStyleB">
              <span>位置筛选</span>
            </div>
            <van-cell-group>
              <van-cell title="楼宇" is-link arrow-direction="down"
                        :value="this.data.chooseData.chooseLyData != null ? this.data.chooseData.chooseLyData.name : '请选择'"
                        @click="showDialogHandle(3)"/>
            </van-cell-group>

            <van-cell title="楼层" is-link arrow-direction="down"
                      :value="this.data.chooseData.chooseLcData != null ? this.data.chooseData.chooseLcData.name : '请选择'"
                      @click="showDialogHandle(4)"/>

            <!--            <van-cell title="房间" is-link arrow-direction="down"-->
            <!--                      :value="this.data.chooseData.chooseFjData != null ? this.data.chooseData.chooseFjData.name : '请选择'"-->
            <!--                      @click="showDialogHandle(5)"/>-->
          </div>

        </div>
        <div class="bottom">
          <van-button type="info" class="buttonS" @click="searchHandle">
            搜索
          </van-button>
        </div>
      </van-popup>

      <van-dialog
        class="dialogMainStyle"
        v-model:show="showDialog"
        :title="dialogTitle"
        :show-confirm-button="false"
        :close-on-click-overlay="true">
        <div class="dialogSearchStyle">
          <form action="/">
            <van-search
              v-model="searchVal"
              placeholder="请输入搜索关键词"
              @input="onUpdate"
            />
          </form>
        </div>
        <div class="dialogDataStyle">
          <div @click="clearHandle()">
            <span>请选择</span>
          </div>
          <div v-for="item in dialogDataBack" @click="chooseHandle(item)">
            <span v-if="item.value" v-html=item.value>{{ item.name }}</span>
            <span v-else>{{ item.name }}</span>
          </div>
        </div>
      </van-dialog>

    </div>
  </div>

</template>
<script>
  import {queryWin} from '@/api/srvAssurance/assetLabel/assetLabel';

  export default {
    name: 'distributionWarehouseSearch',
    components: {},

    setup() {
      const searchVal = ref('');
      return {searchVal};
    },


    data() {
      return {
        inputSearchValue: "",

        loading: false,
        finished: false,
        refreshing: false,

        dataList: [
          {
            pic: "",
            NAME: "哈哈哈",
            FANGCNAME: "qweqweqwe",
            LOUCXX: "qweqweqwe",
            FANGJXX: "qweqweqwe",
            loucname: "34",
            fangjname: "9089",
          },
        ],

        dataInfo: {
          pinm: null,
          num: null,
          releasedNum: null,
          dal: null,
          xiaol: null,
        },

        queryParam: {
          pinm: null,
          pageIndex: 1,
          pageSize: 10,
        },


        show: false,
        showDialog: false,
        dialogTitle: "",
        data: {
          defaultData: {
            lyDataList: [], //楼宇数据
            lcDataList: [], //楼层数据
          },
          filterData: {
            lyDataList: [], //楼宇数据
            lcDataList: [], //楼层数据
          },
          chooseData: {
            chooseLyData: null,
            chooseLcData: null,
          },
        },
        dialogData: [],
        dialogDataBack: [],
        searchVal: null,
      }
    },

    created() {
      // this.dataInfo = this.$route.query.dataInfo;
      // this.queryParam.pinm = this.$route.query.dataInfo.pinm || null;
      // this.inputSearchValue = this.$route.query.dataInfo.pinm || null;
      // this.initData();
    },

    methods: {
      searchPeopleHandle() {
        this.initData();
      },

      onRefresh() {
        this.initData();
      },

      async initData() {
        this.queryParam.pageIndex = 1;
        this.finished = false;
        this.refreshing = true;
        await this.getDataList();
        this.refreshing = false;
      },


      // 加载下一页
      nextPage() {
        // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
        if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
          this.finished = true;
          return;
        }
        setTimeout(() => {
          this.queryParam.pageIndex += 1;
          this.getDataList()
        }, 1000);
      },

      async getDataList() {
        this.loading = true;
        this.queryParam.pinm = this.inputSearchValue;
        let res = await queryWin(this.queryParam);
        if (res.status == 0) {
          if (this.queryParam.pageIndex == 1) {
            // 清空列表数据
            this.dataList = [];
          }
          this.dataList = this.dataList.concat(res.data);
          // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
          if (this.dataList.length >= res.totalCount) {
            this.finished = true;
          }
        }
        this.loading = false;
      },

      checkPeople(item) {
        // this.$emit("ok", item);
      },


      async showDialogHandle(val) {
        this.dialogDataBack = [];
        if (val === 1) {
          this.dialogTitle = "请选择大类信息";
          this.dialogDataBack = [...this.data.defaultData.dlDataList];
          this.data.filterData.xlDataList = [];
          this.data.chooseData.chooseXlData = null;
        } else if (val === 2) {
          if (this.data.chooseData.chooseDlData == null) {
            this.$toast('请先选择大类');
            return;
          }
          this.dialogTitle = "请选择小类信息";
          this.data.filterData.xlDataList = [];
          // 处理小类数据
          let code = this.data.chooseData.chooseDlData.code;
          this.data.defaultData.xlDataList.forEach(item => {
            if (item.parentCode === code) {
              this.data.filterData.xlDataList.push(item);
            }
          })
          this.dialogDataBack = [...this.data.filterData.xlDataList];
        } else if (val === 3) {
          this.dialogTitle = "请选择楼宇信息";
          this.dialogDataBack = [...this.data.defaultData.lyDataList];
        } else if (val === 4) {
          if (this.data.chooseData.chooseLyData == null) {
            this.$toast('请先选择楼宇信息');
            return;
          }
          this.dialogTitle = "请选择楼层信息";
          let lcData = await getLoucByLouy({louyid: this.data.chooseData.chooseLyData.fangcid});
          this.data.defaultData.lcDataList = [];
          if (lcData.status == 0) {
            lcData.data.forEach(item => {
              var data = {};
              data.loucid = item.loucid;
              data.name = item.loucname;
              this.data.defaultData.lcDataList.push(data);
            });
          }
          this.dialogDataBack = [...this.data.defaultData.lcDataList];
        } else if (val === 5) {
          if (this.data.chooseData.chooseLyData == null) {
            this.$toast('请先选择楼宇信息');
            return;
          } else if (this.data.chooseData.chooseLcData == null) {
            this.$toast('请先选择楼层信息');
            return;
          } else {
            this.dialogTitle = "请选择房间信息";
            // this.dialogDataBack = [...this.data.defaultData.fjDataList];
            let fjData = await getFangjByLouc({loucid: this.data.chooseData.chooseLcData.loucid});
            this.data.defaultData.fjDataList = [];
            if (fjData.status == 0) {
              fjData.data.forEach(item => {
                var data = {};
                data.fangjid = item.fangjid;
                data.name = item.fangjname;
                this.data.defaultData.fjDataList.push(data);
              });
            }
            this.dialogDataBack = [...this.data.defaultData.fjDataList];
          }
        }
        this.showDialog = true;
        this.flag = val;
      },

      chooseHandle(item) {
        this.showDialog = false;
        if (this.flag === 1) {
          this.data.chooseData.chooseDlData = item;
          this.queryParam.dal = item.code;
        } else if (this.flag === 2) {
          this.data.chooseData.chooseXlData = item;
          this.queryParam.xiaol = item.code;
        } else if (this.flag === 3) {
          this.data.chooseData.chooseLyData = item;
          this.queryParam.louyid = item.fangcid;
        } else if (this.flag === 4) {
          this.data.chooseData.chooseLcData = item;
          this.queryParam.loucid = item.loucid;
        } else if (this.flag === 5) {
          this.data.chooseData.chooseFjData = item;
          this.queryParam.fangjid = item.fangjid;
        }
      },

      clearHandle() {
        this.showDialog = false;
        if (this.flag === 1) {
          this.data.chooseData.chooseDlData = null;
          this.queryParam.dal = null;
          this.data.chooseData.chooseXlData = null;
          this.queryParam.xiaol = null;
        } else if (this.flag === 2) {
          this.data.chooseData.chooseXlData = null;
          this.queryParam.xiaol = null;
        } else if (this.flag === 3) {
          this.data.chooseData.chooseLyData = null;
          this.queryParam.louyid = null;
        } else if (this.flag === 4) {
          this.data.chooseData.chooseLyData = null;
          this.queryParam.louyid = null;
        } else if (this.flag === 5) {
          this.data.chooseData.chooseLyData = {};
          this.queryParam.louyid = null;
        }
      },

      onUpdate(value) {
        value = value.trim();
        this.dialogDataBack = [];
        let dialogData = [];
        if (this.flag === 1) {
          dialogData = this.data.defaultData.dlDataList;
        } else if (this.flag === 2) {
          dialogData = this.data.defaultData.xlDataList;
        } else if (this.flag === 3) {
          dialogData = this.data.defaultData.lyDataList;
        } else if (this.flag === 4) {
          dialogData = this.data.defaultData.lcDataList;
        } else if (this.flag === 5) {
          dialogData = this.data.defaultData.fjDataList;
        }
        if (value == null || value.trim() == "") {
          this.dialogDataBack = [...dialogData];
          return;
        }
        if (value) {
          dialogData.forEach(i => {
            let val = {...i};
            //判断遍历是否包含输入字符
            if (val.name.indexOf(value) != -1) {
              var newHtml = `<span style="color: red">${value}</span>`;
              //实现高亮效果
              this.dialogDataBack.push(val);
              //替换高亮字段
              this.dialogDataBack.forEach(item => {
                item.value = item.name;
                item.value = item.value.replace(value, newHtml);
              });
            }
          })
        }
      },

    }
  }
</script>

<style scoped lang="less">
  .mainSon {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    background: #fff;

    .peopleMain {
      height: 100%;
      background-color: #80808017;

      .mainUpStyle {
        background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(14 150 216)), to(rgba(14, 150, 216, 0.53)));
        height: 120px;

        .upStyle {
          float: left;
          width: 100%;
          height: 56px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            color: #ffff;
            font-size: 25px;
            font-weight: bold;
          }
        }

        .topRightImgStyle {
          position: absolute;
          width: 20px;
          height: 20px;
          margin-left: 88%;
          margin-top: 15px;
          background: url('../../../assets/images/nx/icon_goods_released.png') no-repeat;
          background-size: 100% 100%;
        }

        .topTextStyle {
          display: flex;
          justify-content: space-between;
          padding: 0px 30px;
          font-size: 10px;
          color: #FFFFFF;
        }

        .topTypeStyle {
          padding: 0px 30px;
          font-size: 10px;
          color: #FFFFFF;
        }

        .upSearchStyle {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .searchMainStyle {
            background-color: transparent;
            width: 80%;
            padding: 10px;

            /deep/ .van-search__content {
              border-radius: 10px;
            }
          }

          .upSearchImgStyle {
            width: 7%;
            height: 30px;
            background: url('../../../assets/images/nx/icon_search.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }


      .listCard {
        height: calc(100% - 120px);
        width: 100%;
        z-index: 999;
        overflow: auto;
        justify-content: flex-start;
        align-items: center;

        .cardVanPullRefresh1 {
          min-height: 100%;

          .dataStyle {
            padding: 10px;
            height: 40px;
            margin: 10px;
            background-color: #FFFFFF;
            border-radius: 10px;

            .peoplePicDefaultStyle {
              width: 60%;
              height: 70%;
              margin: 20%;
              text-align: center;
              background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
              background-size: 100% 100%;
            }

            .picMainStyle {
              width: 10%;
              float: left;
              height: 100%;
            }

            .textMainStyle {
              width: 90%;
              float: right;
              height: 100%;
              justify-content: space-around;
              align-items: flex-start;
              display: flex;
              flex-wrap: nowrap;
              flex-direction: column;

              .tagStyle {
                padding: 2px 4px;
                border-radius: 5px;
              }

              .tagLeft {
                color: blue !important;
              }

              .tagMid {
                color: orange !important;
              }

              .tagRight {
                color: gray !important;
              }
            }
          }

          .custom-image {
            height: 100%;
          }
        }

        .cardVanPullRefresh2 {
          height: 100%;

          //.dataStyle {
          //  padding: 10px;
          //  height: 60px;
          //  margin: 10px;
          //  background-color: #FFFFFF;
          //  border-radius: 10px;
          //}

          .custom-image {
            height: 100%;
          }
        }
      }


      //右侧栏
      .rightBar {

        .mainPopupStyle {
          padding: 10px;
          margin-top: 30px;

          .typeStyle {
            font-size: 19px;
            font-weight: bold;
          }

          .typeStyleA {
            width: 5px;
            height: 27px;
            float: left;
            background-color: #0ca8add4;
          }

          .typeStyleB {
            margin-left: 10px;
            margin-top: 20px
          }

          .checkstyle {
            width: 100%;

            .vanCheckboxGroupStyle {
              width: 100%;
              height: 60px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .buttonStyle {

                .vanButtonStyle {
                  background-color: #0ca8ad4f;
                  border-radius: 5px;
                  height: 35px;

                  span {
                    color: gray;
                  }
                }

                .vanButtonStyleA {
                  border-radius: 5px;
                  border: 1px solid gray !important;
                  height: 35px;

                  span {
                    color: gray;
                  }
                }
              }

            }

            /deep/ .van-checkbox__icon {
              height: 100%;
            }

            /deep/ .van-cell__value {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .van-field__body {
                width: 100%;
              }
            }
          }
        }


        .bottom {
          height: 50px;
          position: absolute;
          bottom: 0px;
          width: 100%;
          display: flex;

          button {
            flex: 1;
            border-radius: 0px;
          }

          .van-button--info {
            background-color: #0ca8add4;
            border: 0.02667rem solid #0ca8add4;
          }

          .van-button--default {
            color: #1989fa;
          }

          .buttonS {
            height: 50px;
            background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(13, 208, 231)), to(rgb(34, 193, 211)));
          }
        }
      }


      .dialogMainStyle {

        .dialogSearchStyle {
          position: fixed;
          width: 100%;
        }

        .dialogDataStyle {
          text-align: center;
          margin-top: 50px;

          div {
            padding: 10px;
          }
        }
      }
    }


    /deep/ .van-dialog {
      height: 70%;
    }

    /deep/ .van-dialog__content {
      overflow-y: scroll;
      height: 85%;
    }
  }

</style>
